<script lang="ts" setup>

// 跳转到热门页面
import type {HotAnimalItem} from "@/types/hot";
import {ImgErrorType} from "@/enum/imgErrorType";
import type {ImgError} from "@/types/error";

const goHot = () => {
  uni.switchTab({
    url: '/pages/hot/hot'
  })
}

// 热门动物数据
defineProps<{
  hotList: HotAnimalItem[]
}>()

//点击详情
const goDetail = (id: string) => {
  uni.navigateTo({
    url: `/subPkg/detail/detail?id=${id}`
  })
}

//图片拿到链接但加载失败
const emit = defineEmits<{
  imgError: [erroImg: ImgError]
}>()
const errorType = ImgErrorType
const onImgError = (index: number, type: ImgErrorType) => {
  emit('imgError', {index, type})
}
</script>

<template>
  <view>
    <view class="hot-title">
      <text>热门动物</text>
      <view style="display: flex;align-items: center" class="text-gray" @click="goHot">查看更多
        <text class="cuIcon-roundrightfill line-awGreen" style="font-size: 18px;margin-left: 3px"></text>
      </view>
    </view>
    <scroll-view :scroll-x="true" class="hot-panel">
      <view class="hot-box">
        <view v-for="(item,index) in hotList.slice(0,10)" :key="item.id" class="hot-item">
          <image :mode="item.img===errorType.ERROR_IMG_URL?'aspectFill':'aspectFill'"
                 :src="item.img?item.img:errorType.ERROR_IMG_URL" class="img"
                 @click="goDetail(item.id)" @error="onImgError(index,errorType.HOT_IMG_ERROR)"></image>
          <text class="name">{{ item.name }}</text>
          <text class="desc">{{ item.desc }}</text>
        </view>
        <view class="bg-gradual-awGreen flex flex-column justify-center align-center margin-lr-sm padding-sm"
              style="height: 100px;border-radius: 20rpx;gap: 5rpx" @click="goHot">
          <view class="text-df" v-show="hotList?.length>5" style="writing-mode: vertical-rl;letter-spacing: 3px">查看更多</view>
          <uni-icons type="arrow-right" style="font-size: 40rpx;" color="#fff"></uni-icons>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss" scoped>
@import "./styles/hot.scss";
</style>